<template>
  <div class="intelligent-warn-container">
    <!--  :class="{ active: pendingCount && !active }" -->
    <div class="intelligent-warn" v-if="active" @click="handleClick">
      <!-- <div class="count">
        <span class="event-count"> {{ pendingCount > 0 ? (pendingCount > 99 ? '99+' : pendingCount) : 0 }}</span>
        <span class="unit">件</span>
      </div> -->
    </div>

    <div class="warn-wrapper" v-else>
      <Transition name="bottom">
        <BouncedPanel @close="close">
          <template #title>
            <div class="title-top">
              <div class="title-l">
                <span>一级事件待处理 </span>
                <span style="color: #ff3131">42</span><span>件</span>
              </div>
            </div>
            <div class="title-r">处理时效 ：30分钟</div>
          </template>

          <div class="warn">
            <div class="title-small">AI监测：13:30，G2京沪高速 K200+300(南京方向)监测到两车碰撞。</div>
            <div class="content">
              <div class="photo" v-if="state.detectionLevel === 1">
                <img src="../../assets/images/intelligent/road.png" style="width: 100%; height: 100%" alt="" />
              </div>
              <div class="list-wrapper">
                <div class="item" v-for="item in fieldList" :key="item.key">
                  <div class="text">{{ item.label }} :</div>
                  <div class="value">{{ item.render ? item.render(state) : state[item.key] }}</div>
                </div>
              </div>
            </div>
            <a-button class="check" @click="handleCheck" :loading="checkLoading">查看核实</a-button>
          </div>
        </BouncedPanel>
      </Transition>
    </div>
  </div>
</template>

<script>
/**
 * @desc 一二级事件
 * @auther 邓清波
 * @date 2022/11/12
 *
 **/
export default {
  name: 'IntelligentWarn'
}
</script>

<script setup>
import BouncedPanel from '../../components/detail-panel'
import { ref, onMounted, getCurrentInstance, toRaw, shallowRef, watch } from 'vue'
// import { getDetectidetail } from '../../api/intelligent'
import { message } from 'ant-design-vue'
import { useStore } from 'vuex'

const { proxy } = getCurrentInstance()
const state = ref({})
const active = ref(true)
const checkLoading = shallowRef(false)
const store = useStore()

const pendingCount = ref(100) // 待处理事件列表

// 循环字段列表
const fieldList = [
  {
    key: 'alarmType',
    label: '告警类型'
  },
  {
    key: 'monitorTime',
    label: '告警时间'
  },
  {
    key: 'detectionLevel',
    label: '事件等级'
  },
  {
    key: 'positionInfo',
    label: '位置',
    render(record) {
      const positionInfo = record.positionInfo || {}
      return (positionInfo.roadNum || ' ') + (positionInfo.kmStake || ' ') + (positionInfo.direction || '')
    }
  }
]
watch(
  () => store.state.config.detailConfig,
  (newDetail, oldDetail) => {
    const config = newDetail.config || []
    for (const i of config) {
      if (i.type === 'map') {
        return (active.value = true)
      }
    }
  },
  {
    deep: true
  }
)

onMounted(() => init())

function init() {
  getData()
}
/**
 * 先用详情  后面改成接受推送
 */
function getData() {
  // getDetectidetail(12314).then(res => {
  //   state.value = res.data || {}
  // })
}

/**
 * 查看核实与智能侦测列表进行通讯
 * **/
function handleCheck() {
  checkLoading.value = true
  proxy.$bus.emit('viewCheck', state.value)
  setTimeout(() => (checkLoading.value = false), 500)
}

/*
 * 切换显示隐藏
 **/
const handleClick = () => {
  if (!active.value && pendingCount.value == 0) {
    active.value = false
    return message.info('没有更多可待处理的事件')
  }
  active.value = !active.value
  if (active.value) {
    getData()
  }
}

/*
 * 关闭方法
 */
function close() {
  active.value = true
}
</script>

<style scoped lang="less">
@import url(../../styles/themes/index.less);
@import url(~@/assets/styles/transition.less);

.intelligent-warn-container {
  position: relative;
}
.intelligent-warn {
  width: 50px;
  height: 50px;
  cursor: pointer;
  background-image: url('../../assets/images/intelligent/intelligent-warn.png');
  background-size: 100% 100%;
}
.intelligent-warn.active {
  background-image: url('../../assets/images/intelligent/intelligent-warn-active.png');
}
/deep/ .mz-panel-content {
  width: 525px;
  height: 210px;
  overflow: initial;
}

.warn-wrapper {
  position: absolute;
  right: 60px;
  top: -12px;
}
.count {
  position: absolute;
  top: -17px;
  right: -11px;
  font-size: 14px;

  .event-count {
    color: #ff3131;
    font-family: 'pangmenzhengdaoregular';
  }
  .unit {
    color: #6a6a6a;
  }
}
.title-top {
  width: 73%;
  height: 100%;
  /deep/.title-l {
    font-size: 16px;
    color: #333333;
    position: absolute;

    span {
      font-family: 'pangmenzhengdaoregular';
      font-size: 16px;
    }
  }
}
.title-r {
  font-size: 14px;
  color: #f38b36;
  font-weight: normal;
  white-space: nowrap;
}
.warn {
  overflow: hidden;

  .title-small {
    font-size: 14px;
    text-align: left;
    color: #000000;
    font-weight: 500;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .content {
    margin-top: 10px;
    width: 100%;
    height: 100px;
    display: flex;

    .photo {
      width: 182px;
      height: 100%;
      overflow: hidden;
    }

    .list-wrapper {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      height: 100%;
      height: 100px;
      color: #333333;
      font-size: 14px;
      margin-left: 10px;

      .item {
        display: flex;
        height: 20px;
        line-height: 20px;

        .text {
          color: #686868;
        }

        .value {
          margin-left: 10px;
          color: #333333;
        }
      }
    }
  }

  .check {
    float: right;
    right: 10px;
    padding: 0;
    width: 86px;
    height: 28px;
    background: #ffffff;
    border: 1px solid #377ee9;
    border-radius: 4px;
    /deep/ .ant-btn-loading-icon {
      width: 13px;
    }
  }
}
</style>
